<template>
    <widget-root :styles="styles" :class="themeName">
        <view class="user-info flex-col" :style="[infoStyle]">
            <!-- #ifndef  H5 -->
            <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
                <u-navbar
                    :is-back="false"
                    :title="title"
                    :title-bold="true"
                    :is-fixed="false"
                    :border-bottom="false"
                    :background="{ background: 'rgba(256,256, 256,' + percent + ')' }"
                    :title-color="percent > 0.5 ? '#000' : '#fff'"
                ></u-navbar>
            </u-sticky>
            <!-- #endif -->
            <view class="user-top flex-1">
                <view class="flex" v-if="isLogin">
                    <router-link to="/bundle/pages/user_profile/user_profile">
                        <image class="icon-avatar" :src="userInfo.avatar" />
                    </router-link>
                    <view class="m-l-30 flex-1">
                        <view class="xxl white" v-if="userInfo.nickname">
                            {{ userInfo.nickname }}
                        </view>
                        <view
                            class="flex user-id m-t-10"
                            v-if="userInfo.sn && content.show_user_sn"
                        >
                            <view class="xs m-r-20 white">会员ID: {{ userInfo.sn }}</view>
                            <view class="xs copy-btn m-l-5" @tap.stop="$copy(userInfo.sn)"
                                >复制</view
                            >
                        </view>
                    </view>
                </view>
                <router-link v-else to="/pages/login/login">
                    <view class="flex white">
                        <image
                            class="icon-avatar"
                            :src="
                                content.avatar_type == 2 && content.avatar
                                    ? $getImageUri(content.avatar)
                                    : require('@/static/images/icon_portrait.png')
                            "
                            mode=""
                        />
                        <view class="m-l-20 flex-1">
                            <view class="xxl"> 点击登录</view>
                            <view class="xs">登录体验更多功能</view>
                        </view>
                    </view>
                </router-link>
            </view>
            <view class="assets-nav white flex">
                <router-link
                    class="flex-1"
                    to="/bundle/pages/user_wallet/user_wallet"
                    v-if="showAssets(1)"
                >
                    <view class="flex-col col-center">
                        <view class="number">{{ userInfo.user_money || 0 }}</view>
                        <view>余额</view>
                    </view>
                </router-link>

                <router-link
                    class="flex-1"
                    to="/bundle/pages/user_sign/user_sign"
                    v-if="showAssets(2)"
                >
                    <view class="flex-col col-center">
                        <view class="number">{{ userInfo.user_integral || 0 }}</view>
                        <view>积分</view>
                    </view>
                </router-link>
                <router-link class="flex-1" to="/bundle/pages/coupon/coupon" v-if="showAssets(3)">
                    <view class="flex-col col-center">
                        <view class="number">{{ userInfo.coupon || 0 }}</view>
                        <view>优惠券</view>
                    </view>
                </router-link>
                <router-link
                    class="flex-1"
                    to="/bundle/pages/goods_collects/goods_collects"
                    v-if="showAssets(4)"
                >
                    <view class="flex-col col-center">
                        <view class="number">{{ userInfo.collect || 0 }}</view>
                        <view>收藏</view>
                    </view>
                </router-link>
            </view>
            <router-link
                class="flex-1"
                to="/bundle/pages/user_vip/user_vip"
                v-if="content.show_member"
            >
                <view class="user-grade flex row-between">
                    <view class="sm">
                        <span class="lg m-r-12 weight-500" style="font-style: italic"
                            >V <span class="xxs">{{ userInfo.level_rank || '' }}</span></span
                        >{{ isLogin ? userInfo.level_name || '' : '登录查看会员权益' }}
                    </view>
                    <view class="xs">了解会员 <u-icon name="arrow-right"></u-icon> </view>
                </view>
            </router-link>
        </view>
    </widget-root>
</template>

<script type="text/javascript">
export default {
    props: {
        content: {
            type: [Object, Array]
        },
        styles: {
            type: [Object, Array]
        },
        percent: {
            type: Number,
            default: 0
        },
        title: {
            type: String,
            default: '个人中心'
        }
    },
    data() {
        return {}
    },
    methods: {},
    computed: {
        showAssets() {
            return (type) => {
                return this.content.assets.includes(type)
            }
        },
        infoStyle() {
            const { background_image, background_type } = this.content
            if (!background_image || background_type == 1) {
                return {}
            }
            return {
                'background-image': `url(${this.$getImageUri(this.content.background_image)})`
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.user-info {
    @include background_image(90deg, 0%, 100%, '../../../static/images/bg_user.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    box-sizing: border-box;

    .user-top {
        padding: 0 30rpx;
        // #ifdef  H5
        padding-top: 30rpx;

        // #endif
        .icon-avatar {
            width: 110rpx;
            height: 110rpx;
            border-radius: 50%;
            border: 1px solid #f8f8f8;
        }

        .user-id {
            display: inline-flex;
            border: 1px solid #fff;
            border-radius: 100rpx;
            padding-left: 20rpx;

            .copy-btn {
                padding: 3rpx 20rpx;
                border-radius: 20rpx;
                background: #fff;
            }
        }
    }

    .assets-nav {
        padding: 30rpx 0 20rpx;

        .number {
            font-size: 32rpx;
        }
    }

    .user-grade {
        color: #ffe0a1;
        height: 80rpx;
        background: url('../../../static/images/bg_user_grade.png');
        background-size: 100%;
        padding: 0 20rpx;
        margin: 0 20rpx;
    }
}
</style>
